<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/home.css">
    <script src="../js/jquery.js"></script>
    <link rel="stylesheet" href="../css/common.css">
    <script src="../js/common.js"></script>
</head>

<body>

<!--需要将top和foot两个页面进行引用-->
<div id="topHtml"></div>
<!--div+css布局-->
<div class="home-middle">
    <!--    一个左，一个右，两个div需要在一行，需要浮动-->
    <!--    需要上下相隔50px-->
    <div class="jxdt">
        <div class="banner">教新动态</div>
        <div>
            <div class="floatLeft"><img src="../img/m331.jpg" height="250" width="268"/></div>
            <div class="floatRight">
                <div>
                    <!--                    h1~h6叫标题,p标签，叫做段落，就会自动换行加一行-->
                    <a href="#"><h5>日本较大抹茶督饮七叶和茶登陆上海</h5></a>
                    <a href="#"><p>日本较大的抹茶</p></a>
                </div>
                <div>
                    <!--                    h1~h6叫标题,p标签，叫做段落，就会自动换行加一行-->
                    <a href="#"><h5>日本较大抹茶督饮七叶和茶登陆上海</h5></a>
                    <a href="#"><p>日本较大的抹茶餐饮连锁正式登陆上海，其中</p></a>
                </div>
                <div>
                    <!--                    h1~h6叫标题,p标签，叫做段落，就会自动换行加一行-->
                    <a href="#"><h5>日本较大抹茶督饮七叶和茶登陆上海</h5></a>
                    <a href="#"><p>日本较大的抹茶餐饮连锁正式登陆上海，其中本较大的抹茶餐饮连</p></a>
                </div>
            </div>
        </div>
    </div>
    <div class="cpzs">
        <div class="banner">产品展示</div>
        <div class="floatLeft home-product">
            <div><img src="../img/48_j53b.jpg" height="300" width="300"/></div>
            <div>蚂蚁上树蚁上蚁上蚁上蚁上蚁上蚁上</div>
            <div>粉丝200g, 猪肉馅50克。</div>
        </div>
        <div class="floatRight home-product">
            <div><img src="../img/48_j53b.jpg" height="300" width="300"/></div>
            <div>蚂蚁上树</div>
            <div>粉丝200g, 猪肉馅50克。丝200g, 猪肉馅丝200g, 猪肉馅丝200g, 猪肉馅</div>
        </div>

    </div>


</div>
<div id="footHtml"></div>
</body>
</html>